<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib prefix="spring"
	uri="http://www.springframework.org/tags/form"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>增加车位申请</title>
<link rel="styleSheet" href="../../css/bootstrap.min.css">
<style type="text/css">
#registDiv {
	width: 700px;
	height: 400px;
	margin-left: 140px;
	margin-top: 50px;
}

#addCarPortForm {
	margin-left: 200px;
	width: 350px;
}

#loading {
	display: none;
	width: 20px;
	height: 20px;
}

#uImg {
	width: 50px;
	height: 50px;
}

#loading {
	display: none;
	width: 20px;
	height: 20px;
}

#subBtn {
	float: right;
}
.form-control{
	width:200px;
}
.form-group{
	margin-top:20px;
}
</style>
</head>
<body style="background-color: transparent;">
	<div id="registDiv">
		<spring:form id="addCarPortForm" action="addCarPort.do" class="form-horizontal" method="post"
			onsubmit="return check()" commandName="personalcarport" enctype="multipart/form-data">
			<input type="hidden" name="ladyID" id="ladyID" value="${sessionScope.myLandLady.ladyID }">
			<div class="form-group">
				<label for="carportNO">产权证编号</label> <input style="width:200px;" type="text"
					class="form-control" id="carportNO" name="carportNO"
					onblur="checkCarportNO()" onfocus="cleanCarportNOMessage()">
					<div style="height:20px;">
						<span id="carportNOMessage"></span><spring:errors delimiter="," path="carportNO"></spring:errors>
					</div>
			</div>
			<div class="form-group">
				<label for="carportAddress">车位所在小区地址</label> <input type="text"
					class="form-control" id="carportAddress" name="carportAddress"
					onblur="checkCarportAddress()" onfocus="cleanCarportAddressMessage()">
					<div style="height:20px;">
						<span id="carportAddressMessage"></span><spring:errors delimiter="," path="carportAddress"></spring:errors>
					</div>
			</div>
			<div class="form-group">
				<label for="carNO">小区车位编号</label> <input type="text"
					class="form-control" id="carNO" name="carNO" onblur="checkCarNO()"
					onfocus="cleanCarNO()">
					<div style="height:20px;">
						<span id="carNOMessage"></span><spring:errors delimiter="," path="carNO"></spring:errors>
					</div>
			</div>
			<div class="form-group">
				<label for="myFile">上传产权证影印件:</label> <input type="file" id="myFile"
					size="20" name="myFile" onfocus="cleanPic()">
					<div style="height:20px;">
						<span id="pic"></span>
					</div>
			</div>
				
			<div class="form-group">
				
				
			</div>
			<button type="submit" id="subBtn" class="btn btn-default btn btn-primary">申请</button>
		</spring:form>
	</div>
	<script type="text/javascript" src="../../js/jquery-1.11.1.min.js"></script>
	<script type="text/javascript" src="../../js/ajaxfileupload.js"></script>
	<script type="text/javascript">
		
		function check() {
			var flag = checkCarportNO() && checkCarNO() && checkCarportAddress()&&checkPic();
			return flag;
		}
		function checkCarportNO() {
			var carportNO = document.getElementById("carportNO").value;
			var carportNOMessage = document.getElementById("carportNOMessage");
			var eReg = /^[a-zA-Z0-9]{2,15}$/;
			if (carportNO.length == 0) {
				carportNOMessage.innerHTML = "×产权证编号不能为空";
				$("#carportNO").css("border-color","red");
				carportNOMessage.style.color="red";		
				return false;
			} else if (!eReg.test(carportNO)) {
				carportNOMessage.innerHTML = "×产权证编号格式:2-15位的英文字母和数字"
				$("#carportNO").css("border-color","red");
				carportNOMessage.style.color="red";	
				return false;
			} else {
				var result = carportNOIsExist(carportNO);
				$("#carportNO").css("border-color","green");
				$("#carportNOMessage").css("color","green");
				$("#carportNOMessage").html("√此产权证编号可使用");
				return result;
			}
		}
		function checkCarNO() {
			var carNO = document.getElementById("carNO").value;
			var carNOMessage = document.getElementById("carNOMessage");
			var eReg = /^[a-zA-Z0-9]{2,5}$/;
			if (carNO.length == 0) {
				carNOMessage.innerHTML = "×小区车位编号不能为空"
				$("#carNO").css("border-color","red");
				$("#carNOMessage").css("color","red");
				return false;
			} else if (!eReg.test(carNO)) {
				$("#carNO").css("border-color","red");
				$("#carNOMessage").css("color","red");
				carNOMessage.innerHTML = "×小区车位编号格式:2-5位的英文字母和数字"
				return false;
			} else {
				//在这里先验证地址是否为空   不为空  再到数据库进行重复性的验证  ，小区车位编号和小区地址不能重复（同一条数据出现两次）
				var carportAddress = document.getElementById("carportAddress").value;
				var result = checkCarportNO()&&carNOIsExist(carNO,carportAddress);
				return result;
			}
		}
		//验证产权证编号是否已存在
		function carportNOIsExist(carportNO) {
			var message = document.getElementById("carportNOMessage");
			var resu = true;
			$.ajax({
				type : "POST",
				url : "checkCarportNO.do",
				async : false,
				data : {
					"carportNO" : carportNO
				},
				success : function(result) {
					if (result == 1) {
						message.innerHTML = "×该产权证编号已存在";
						$("#carportNO").css("border-color","red");
						$("#carportNOMessage").css("color","red");
						resu = false;
					} else {
						message.innerHTML = "√此产权证编号可使用";
						$("#carportNO").css("border-color","green");
						$("#carportNOMessage").css("color","green");
						resu = true;
					}
				}
			});
			return resu;
		}
		//验证车位编号是否存在
		function carNOIsExist(carNO,carportAddress){
			var message = document.getElementById("carNOMessage");
			var resu = true;
			$.ajax({
				type : "POST",
				url : "checkCarNO.do", //通过传入的小区地址和小区车位编号在数据库查询   
				async : false,
				data : {
					"carNO" : carNO,"carportAddress":carportAddress
				},
				success : function(result) {
					if (result == 1) {
						message.innerHTML = "×本小区该车位编号已使用";
						$("#carNO").css("border-color","red");
						$("#carNOMessage").css("color","red");
						resu = false;
					} else {
						message.innerHTML = "√车位编号可使用";
						$("#carNO").css("border-color","green");
						$("#carNOMessage").css("color","green");
						resu = true;
					}
				}
			});
			return resu;
		}
		function checkCarportAddress() {
			var carportAddress = document.getElementById("carportAddress").value;
			var carportAddressMessage = document.getElementById("carportAddressMessage");
			if (carportAddress.length == 0) {
				carportAddressMessage.innerHTML = "×车位所在小区地址不能为空";
				$("#carportAddress").css("border-color","red");
				$("#carportAddressMessage").css("color","red");
				return false;
			} else {
				carportAddressMessage.innerHTML = "√地址可以使用";
				$("#carportAddress").css("border-color","green");
				$("#carportAddressMessage").css("color","green");
				return true;
			}
		}
		function checkPic(){
			if($("#myFile").val()==""){
				$("#pic").html("×未选择文件");
				$("#pic").css("color","red");
				return false;
			}else{
				return true;
			}
		}
	//清除内容
		function cleanCarportNOMessage() {
			$("#carportNO").css("border-color","");
			$("#carportNOMessage").html("");
		}
		function cleanCarportAddressMessage() {
			var addressMessage = document.getElementById("carportAddressMessage");
			$("#carportAddress").css("border-color","");
			addressMessage.innerHTML = "";
		}
		function cleanCarNO(){
			var carNOMessage = document.getElementById("carNOMessage");
			$("#carNO").css("border-color","");
			carNOMessage.innerHTML = "";
		}
		function cleanPic(){
			$("#pic").html("");
		}
		
	</script>
</body>
</html>